<template>
  <div>
    <canvas id="canvas" width="800" height="600"></canvas>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';
import { fabric } from 'fabric';


export default {
  name: 'CanvasComponent',
  setup() {
    const canvasRef = ref(null);

    onMounted(() => {

      const canvas = new fabric.Canvas("canvas");

      const rect = new fabric.Rect({
        width: 50,
        height: 50,
        left: 100,
        top: 100,
        stroke: '#aaf',
        strokeWidth: 5,
        fill: '#faa',
        selectable: false,
      });
      canvas.add(rect);

      const animateBtn = document.getElementById('animate');
      animateBtn.onclick = function () {
        animateBtn.disabled = true;
        rect.animate(
          { left: rect.left === 100 ? 400 : 100 },
          {
            duration: 1000,
            onChange: () => canvas.requestRenderAll(),
            onComplete: function () {
              animateBtn.disabled = false;
            },
            easing: fabric.util.ease[document.getElementById('easing').value],
          }
        );
      };

    });

    return {
      canvasRef
    };
  }
};
</script>

<style scoped>
canvas {
  border: 1px solid black;
}
</style>